<template>
  <!-- 项目实施 - 高级筛选 -->
  <div class="advanced-filter">
    <el-form :inline="true" :model="shortForm" class="demo-form-inline">
      <el-form-item v-for="(i, idx) in shortForm.item" :key="'item.' + idx" :label="i.title" :prop="'item.' + idx + '.value'">
        <el-select v-model="i.sel1" multiple size="mini" clearable placeholder="请选择..." style="width: 70px;margin-left:5px;"></el-select>
        <el-select v-model="i.sel2" multiple size="mini" clearable placeholder="请选择..." style="width: 120px;margin-left:5px;"></el-select>
        <el-select v-model="i.sel3" multiple size="mini" clearable placeholder="请选择..." style="width: 80px;margin-left:5px;"></el-select>
        <el-input v-model="i.ipt1" disabled size="mini" style="width: 120px;margin-left:5px;"></el-input>
        <el-select v-model="i.sel4" multiple size="mini" clearable placeholder="请选择..." style="width: 70px;margin-left:5px;"></el-select>
        <el-select v-model="i.sel5" size="mini" clearable placeholder="and" style="width: 70px;margin-left:5px;">
          <el-option label="and" value="and"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-button icon="el-icon-plus" type="primary" class="cust-btn" round @click="handleAdd"></el-button>
        <el-button v-if="index != 0" icon="el-icon-minus" type="primary" round class="cust-btn" @click="handleRemove"></el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "advancedFilter",
  props: {},
  data() {
    return {
      index: 0,
      shortForm: {
        item: [
          {
            sel1: '',
            sel2: '',
            sel3: '',
            sel4: '',
            sel5: 'and',
            ipt1: ''
          }
        ]
      },
    }
  },
  methods: {
    
    /**
     * @author Wrl
     * 新增筛选条件
     */
    handleAdd(e) {
      this.index++;
      this.shortForm.item.push({
        sel1: '',
        sel2: '',
        sel3: '',
        sel4: '',
        sel5: '',
        ipt1: '',
      });
    },
    /**
     * @author Wrl
     * 删除筛选条件
     */
    handleRemove(e) {
      this.shortForm.item.splice(this.index, 1);
      this.index--
    },
  }
}
</script>
<style lang="scss" scoped>
  .advanced-filter {
    .cust-btn {
      padding: 2px 3px;
      font-size: 10px;
    }
    ::v-deep {
      .el-form-item {
        width: auto !important;
        &::before {
          display: block;
          content: "";
        }
        &::after {
          display: block;
          content: "";
        }
        .el-form-item__content {
          width: auto !important;
        }
      }
    }
  }
</style>
